<template>
    <div>

        <el-form :model="model" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="报价单号" prop="Number">
                        <el-input v-model="model.Number" placeholder="报价单号" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户" prop="CustomerNumber">
                        <el-input v-model="model.CustomerNumber" placeholder="客户" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人" prop="CustomerContact">
                        <el-input v-model="model.CustomerContact" placeholder="联系人" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            


            <el-row>
                <el-col :span="8">
                    <el-form-item label="联系人电话" prop="CustomerContactTel">
                        <el-input v-model="model.CustomerContactTel" placeholder="联系人电话" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报价人" prop="EmployeesName">
                        <el-input v-model="model.EmployeesName" placeholder="报价人" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="交货日期" prop="DeliveryTime">
                        <el-input v-model="model.DeliveryTime" placeholder="交货日期" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="出库仓" prop="WarehouseName">
                        <el-input v-model="model.WarehouseName" placeholder="出库仓" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="交货地址" prop="DeliveryLocation">
                        <el-input v-model="model.DeliveryLocation" placeholder="交货地址" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="收款方式" prop="PaymentCategory">
                        <el-input v-model="model.PaymentCategory" placeholder="收款方式" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="收款账户" prop="PaymentAccount">
                        <el-input v-model="model.PaymentAccount" placeholder="收款账户" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="收款日期" prop="PaymentTime">
                        <el-input v-model="model.PaymentTime" placeholder="收款日期" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="运输方式" prop="Transfer">
                        <el-input v-model="model.Transfer" placeholder="运输方式" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="总价" prop="Price">
                        <el-input v-model="model.Price" placeholder="总价" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="优惠" prop="DisCount">
                        <el-input v-model="model.DisCount" placeholder="优惠" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="备注" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>


            
        </el-form>


        <div style="border: 1px solid #dcdfe6; padding: 10px;">
            <h1 style="margin: 10px;">商品</h1>
          
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                
                    <el-table-column type="selection" width="55"></el-table-column> 
                    <el-table-column prop="ItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="TaxPrice" label="含税单价" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="TaxAmount" label="含税金额" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true"></el-table-column>
                    
                    <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true"></el-table-column>
                    
                    <el-table-column prop="Price" label="商品单价" :show-overflow-tooltip="true"></el-table-column>
                    
                    <el-table-column prop="Tax" label="税率" :show-overflow-tooltip="true"></el-table-column>
                    
                    <el-table-column prop="Rebate" label="折扣" :show-overflow-tooltip="true"></el-table-column>
                    
                    <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                    

            </el-table>
        </div>
    </div>
</template>




<script>

export default {
    props: {
        model: {
            require: true,
            type: Object,

        }
    },
    data() {
        return {
            tableData: [],
            isLoading: false,
        }
    },
    created() {
        this.GetOrderQuotebyId();
    },
    methods: {

        GetOrderQuotebyId(Id) {
            
            this.isLoading=true;
            this.$http.get('/api/OrderQuote/GetOrderQuotebyId',{
                params:{
                    OrderQuoteId:this.model.Id,
                    WareHouseId:this.model.WarehouseId
                }
                
            })
            
            .then(res => {
                this.isLoading = false;
                this.tableData=res.Data;
                
            })
        }

    }
}
</script>